<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css">
  <title>旋转变色效果</title>
</head>
<body>
  <section>
    <svg>
      <filter id="gooey">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
        <feColorMatrix values="
          1 0 0 0 0
          0 1 0 0 0
          0 0 1 0 0
          0 0 0 20 -10"></feColorMatrix>
      </filter>
    </svg>
    <div class="loader">
      <span style="--i:1;"></span>
      <span style="--i:2;"></span>
      <span style="--i:3;"></span>
      <span style="--i:4;"></span>
      <span style="--i:5;"></span>
      <span style="--i:6;"></span>
      <span style="--i:7;"></span>
      <span style="--i:8;"></span>
      <span class="rotate" style="--j:0;"></span>
      <span class="rotate" style="--j:1;"></span>
      <span class="rotate" style="--j:2;"></span>
      <span class="rotate" style="--j:3;"></span>
      <span class="rotate" style="--j:4;"></span>
    </div>
  </section>
</body>
</html>